<template>
	<div>

		<div id="nav">
			<el-row>
				<el-col :span="11" style="text-align: center;">
					<div style="color: #fff; padding-top: 40px;">
						<img src="/img/0-logo-sqr.png" />
					</div>

				</el-col>

				<el-col :span="11" style="padding-top: 38px;">

		<div class="item" v-for="(item,index) in navitems" @click="convertPage(item,index,$event)" :class="{is_hidden_item:currentItem==index&&item.ishidden}">
						<span :class="currentItem==index?current_select:itme_hidden">{{item.name}}<i
								v-show="item.ishidden" class="el-icon-arrow-down"></i>
						</span>
						<div class="declare_hidden" v-if="currentItem==index" @mouseleave="hiddenChild($event,index)">
				<div   v-for="(child,index2) in item.childs" :class="{selectchild:currentChild==index2}"  @click="childPage(child,index2)">{{child.name}}</div>
						</div>
					</div>

				</el-col>

			</el-row>
		</div>


	</div>

</template>

<script>
	export default {
		name: 'HeadNav',
		data() {
			return {
				navitems: [{
						name: '申报人首页',
						path: '/index'
					},
					{
						name: '进行申报',
						path: '',
						ishidden: true,
						childs: [{
								name: '专业技术职务任职资格评审表',
								path: '/evaluation'
							},
							{
								name: '学习培训经历',
								path: '/study'
							},
							{
								name: '工作经历',
								path: '/work'
							},
							{
								name: '任职前工作业绩',
								path: '/officebefore'
							},
							{
								name: '任职后工作业绩',
								path: '/officelater'
							},
							{
								name: '著作论文报告',
								path: '/literature'
							},
							{
								name: '考试成绩与答辩',
								path: '/reply'
							},
							{
								name: '年度任职考核',
								path: '/yearaudit'
							},
							{
								name: '上传申报资料',
								path: '/uploadfile'
							}
						]
					},
					{
						name: '申报记录',
						path: '/jilu'
					},
					{
						name: '下载中心',
						path: '/download'
					},
					{
						name: '通知公告',
						path: '/notice'
					},{
						name: '问题咨询',
						path: '/inquiry'
					},
					{
						name: '技术支持',
						path: '/technicalsupport'
					}
				],
				currentItem: sessionStorage.getItem("parent_index")?sessionStorage.getItem("parent_index"):0,
				currentChild:-1,
				current_select: 'current_select',
				itme_hidden: 'itme_hidden',
				selectChild:'selectchild',
				ishiddenitem:'is_hidden_item'

			}
		},
		methods: {

			//鼠标移开隐藏子菜单
			hiddenChild(event,index){
				console.log(index)
				console.log(event)
				this.currentItem=-1


			},

			//父菜单点击事件
			convertPage(el, index) {
				this.currentItem = index
				//避免页面刷新索引丢失
				sessionStorage.setItem("parent_index",index)
				//避免重复点击
				if(el.ishidden || this.$router.currentRoute.fullPath===el.path) return
				this.$router.push({path:el.path})


			},
			//子菜单点击事件
			childPage(child,index2){
				this.currentChild=index2
				//避免重复点击
				if(child.ishidden || this.$router.currentRoute.fullPath===child.path) return
				this.$router.push({path:child.path})
			}

		}
	}
</script>

<style scoped>
	#nav {
		width:100%;
		height: 122px;
		background: url(../../public/img/0-bg-top.png) no-repeat ;
		background-size: 100% 100%;
		position: relative;
	}

	.item {
		display: inline-block;
		padding: 10px 13px 0px 13px;
		color: #C2C9E2;
		cursor: default;
		height: 80px;
		font-weight: 600;
	}

	.current_select {
		position: relative;
		color: #fff;
	}

	.current_select:after {
		content: '';
		position: absolute;
		left: 18px;
		top: auto;
		bottom: -8px;
		right: auto;
		height: 2px;
		width: 40px;
		background-color: #fff;
	}

	.hidden_select {
		border-radius: 2px 2px 0px 0px;
		background-color: #000000;


	}

	.declare_hidden {
		position: absolute;
		width: 100%;
		background-color: #3B4E84;
		z-index: 99;
		top: 118px;
		left: 0;
		text-align: center;

	}

	.declare_hidden>div {
		display: inline-block;
		padding: 48px 25px;
		color: #C2C9E2;
	}

	.selectchild{
		color: #fff !important;
	}


	/* 隐藏块显示时 */
	.is_hidden_item{
		border-radius: 6px 6px 0 0;
		background-color: #3B4E84;
	}
</style>
